<template>
	<div slot="customContent" style="width: 100%;">
		<div class="title">
			请输入手机号码
		</div>
		<div class="secondTitle">
			由于您是首次来院就诊，请输入手机号码完成自助建档，谢谢！
		</div>
		<div class="keyBoardBox">
			<input class="inputStyle" v-model="phone" placeholder="" />
			<div class="NumberBox">
				<div class="number" @click="clickNumber(item)" v-for="(item,index) in numberList" :key="'o'+index">
					{{item.name}}
				</div>
			</div>
		</div>
		<div class="bottomBox" style="justify-content: space-between;">
			<el-button class="BtnTextHome mrR" @click="goBackHome()">首页</el-button>
			<el-button class="BtnTextGreen" style="margin-right: 0.9375rem;" @click="makeSure()">确定</el-button>
		</div>
		<div class="payByCardSuccessBox" v-if="zzjdIsShow">
		<!-- <div class="payByCardSuccessBox"> -->
			<div class="payBoxTop">
				<div class="payBoxTopTime">{{payBoxTime}}S</div>
				<div class="payBoxTopClose el-icon-close" @click="closeYinying">
				</div>
			</div>
			<img src="@/assets/images/zhifuchenggong.png" class="successBox"></img>
			<div class="itemIitle deepHui ">恭喜您，建档成功</div>
			<div class="userInfoBox">
				<div class="infoItem">
					<div class="infoKey">姓名：</div>
					<div class="infoKey">{{$store.state.user.userinfo.patientName}}</div>
				</div>
				<div class="infoItem">
					<div class="infoKey">手机号：</div>
					<div class="infoKey">{{$store.state.user.userinfo.phone}}</div>
				</div>
				<div class="infoItem">
					<div class="infoKey">卡号：</div>
					<div class="infoKey">{{$store.state.user.userinfo.idNo}}</div>
				</div>
			</div>
			<div class="bottomText">
				<!-- 温馨提示：您的健康卡二维码正在打印中… -->
			</div>
		</div>
		<div v-if="zzjdIsShow" class="yiny" @click="closeYinying()"></div>
	</div>
</template>

<script>
	import {
		putUserInfo
	} from "@api/apiBox/user"
	export default {
		name: "zzjd",

		data() {
			return {
				phone: '',
				numberList: [{
						name: 1,
						value: 1
					},
					{
						name: 2,
						value: 2
					}, {
						name: 3,
						value: 3
					}, {
						name: 4,
						value: 4
					}, {
						name: 5,
						value: 5
					}, {
						name: 6,
						value: 6
					}, {
						name: 7,
						value: 7
					}, {
						name: 8,
						value: 8
					}, {
						name: 9,
						value: 9
					}, {
						name: '退格',
						value: 10
					}, {
						name: 0,
						value: 0
					}, {
						name: '清除',
						value: 11
					}
				],
				res: false,
				zzjdIsShow: false,
				payBoxTime: 5,
				myVar: ''
			}
		},
		methods: {
			clickNumBerItem(item, index) {
				this.phone = item.value;
				this.clearClicNumber();
				this.numberList[index].isClick = true;
			},
			//点击小键盘
			clickNumber(item) {
				if (item.value < 10) {
					this.phone += (item.value).toString();
				}
				//退格
				else if (item.value == 10) {
					let str = this.phone;
					this.phone = str.slice(0, str.length - 1)
				} //清楚
				else if (item.value == 11) {
					this.phone = "";
					this.clearClicNumber();
				}
			},
			//清空充值金额点击
			clearClicNumber() {
				let list = this.numberList;
				for (let item of list) {
					item.isClick = false;
				}
				this.numberList = list;
			},
			//关闭弹窗
			closeYinying() {
				this.zzjdIsShow = false;
				clearInterval(this.myVar);
				this.$emit('gotoNextPage');
			},
			//前往自助建档
			async makeSure() {
				let myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!(myreg.test(this.phone))) {
					this.$message({
						message: '<text class="warningMsg">手机号码有误，请重填</text>',
						duration: 2000,
						center: true,
						offset: 1300,
						dangerouslyUseHTMLString: true,
						type: 'warning'
					});
					return;
				}
				// this.Name = obj.name;
				// this.Sex = obj.gender;
				// this.Nation = obj.nation;
				// this.Birthday = obj.birthday;
				// this.Address = obj.address;
				// this.ID = obj.cardID;
				// this.GrantDept = obj.issuingOrg;
				// this.EffectiveDate = obj.validStart;
				// this.ExpirationDate = obj.validEnd;
				
				
				
				let data = {
					data: {
						idNo: this.$store.state.user.userIdCardInfo.ID,
						phone: this.phone,
						idType: 'sfz',
						patientName: this.$store.state.user.userIdCardInfo.Name
					},
					that: this
				}
				// let data = {
				// 	data: {
				// 		idNo: '110101199003078873',
				// 		phone: this.phone,
				// 		idType: 'sfz',
				// 		patientName: '胡莫宁'
				// 	},
				// 	that: this
				// }
				const res = await putUserInfo(data);
				console.log(res)
				//存储用户信息
				this.$store.dispatch("user/updateuserinfo", res.data);
				this.zzjdIsShow = true;
				this.payBoxTime = 5;
				let _this = this;
				clearInterval(_this.myVar);
				_this.myVar = window.setInterval(() => {
					let dataTime = _this.payBoxTime;
					if (dataTime >= 1) {
						dataTime -= 1;
						_this.payBoxTime = dataTime;
					} else {
						_this.closeYinying();
					}
				}, 1000);
			},
			getAges(str) {
				if (str) {
					var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
					if (r == null) return false;
					var d = new Date(r[1], r[3] - 1, r[4]);
					if (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]) {
						var Y = new Date().getFullYear();
						return (Y - r[1]);
					}
				}
				return ("");
			}
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.payBoxTop {
		display: flex;
		width: 100%;
		position: relative;
	}

	.warningMsg {
		font-size: 22px !important;
	}

	.payBoxTopTime {
		font-size:  3.275rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #57A8FF;
		line-height: 48px;
		margin: 15px;
	}

	.payBoxTopClose {
		width: 3.125rem;
		height: 3.125rem;
		background: #57A8FF;
		border-radius: 6px;
		position: absolute;
		right: 0px;
		top: 0px;
		color: #FFF0FF;
		font-size: 2.975rem;

	}

	.mrR {
		margin-right: 700px;
	}

	.BtnText {
		text-align: center;
		width: 132px;
		font-size: 3.1vw;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.title {
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		text-align: center;
	}

	.secondTitle {
		font-size: 20px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A1ADBB;
		margin-top: 28px;
		text-align: center;
	}

	.keyBoardBox {
		margin-left: calc(50% - 279.5px);
		text-align: center;
		width: 559px;
		margin-top: 40px;
		height: 485px;
		background: #FFFFFF;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 6px;
	}

	.NumberBox {
		display: flex;
		flex-wrap: wrap;
		padding-left: 30px;
		padding-rigth: 30px;
		margin-top: 10px;
	}

	.number {
		background: #57A8FF;
		border-radius: 6px;
		font-size: 2.1625rem;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		margin: 20px;
		margin-left: 15px;
		width: 133px;
		height: 55px;
		margin-bottom: 0px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		//隐藏溢出的径向渐变背景
		overflow: hidden;
	}

	.number:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		pointer-events: none;
		//设置径向渐变
		background-image: radial-gradient(#FFFFFF 100%, transparent 100%);
		background-repeat: no-repeat;
		background-position: 100%;
		transform: scale(10, 10);
		opacity: 0;
		transition: transform .2s, opacity 0.2s;
	}

	.number:active:after {
		transform: scale(1, 1);
		opacity: 0.2;
		//设置初始状态
		transition: 0s;
	}


	.inputStyle {
		width: 450px;
		height: 70px;
		background: #EDF2F5;
		border-radius: 8px;
		border: none;
		padding: 10px;
		padding-bottom: 10px;
		margin-top: 40px;
		font-size: 3VW;
		text-align: center;
	}

	.yiny {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 2;
	}


	.payByCardSuccessBox {
		position: fixed;
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		width: 565px;
		padding-bottom: 30px;
		background: #FFFFFF;
		bottom: 152px;
		left: calc(50% - 282.5px);
		z-index: 3;
		text-align: center;
		box-shadow: 0px 1px 27px 0px rgba(42, 103, 177, 0.09);
		border-radius: 6px;
	}

	.itemIitle {
		width: 100%;
		text-align: center;
		font-size: 2.9vw;
		margin-top: 13px;
	}

	.successBox {
		width: 150px;
		height: 139px;
		margin-top: 10px;
	}

	.cardMar {
		margin-top: 25px;
	}


	.topBox {
		width: 100%;
		height: 50px;
		margin-top: 21px;
		margin-left: 20px;
	}

	.topBoxLeft {
		float: left;
		height: 100%;
		font-size: 32px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #57A8FF;
	}

	.topBoxRight {
		width: 50px;
		height: 50px;
		background: #57A8FF;
		border-radius: 6px;
		position: absolute;
		right: 0px;
		top: 0px;
		color: #FFF0FF;
		font-size: 4.7vw;
	}

	.userInfoBox {
		width: 410px;
		padding-left: 2.571428rem;
		padding-top: 1.714285rem;
		padding-bottom: 1.714285rem;
		background: #F1F6F9;
		border-radius: 8px;
		margin-top: 26px;
	}

	.infoItem {
		display: flex;
		font-size: 26px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #435C7A;
		margin-top: 10px;
	}

	.bottomText {
		font-size: 22px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FE5F5F;
		margin-top: 25px;
	}

	.warningMsg {
		font-size: 22px !important;
	}
	.BtnTextHome{
		background: #57A8FF !important;
	}
	.BtnTextGreen{
		background: #46C349 !important;
	}
</style>
